import React, {Component} from 'react';
import {observer} from 'mobx-react';
import {Toast, Icon, Tools} from 'weaver-mobile';
import { MapPage } from 'weaver-mobile-page';
import { Marker } from 'react-amap';
import has from 'lodash/has';
const Normal = MapPage.Normal;
const getLabel = Tools.getLabel;

let map, geolocation;

@observer
export default class Map extends Component{
    constructor(props){
        super(props);
        this.state = {
            dis: null
        }
    }

    componentDidMount(){
        // this.props.store.getCurrentPosition()        
        this.setState({dis: null});
    }

    plugins = [
        // 'Scale',
    ];

    mapEvents = {
        created: instance => this.setMapInstance(instance)
    }

    setMapInstance = instance => {
        if (instance.CLASS_NAME === "AMap.Map") {
            map = instance;
            //add locations
            this.setLocations();
        }
    }

    clearMarker = () => {
        let overlays = map.getAllOverlays('marker');
        overlays.map(overlay => {
            const extData = overlay.getExtData();
            has(extData, 'id') && map.remove(overlay);
        });
        overlays = map.getAllOverlays('circle');
        overlays.map(overlay => {
            const extData = overlay.getExtData();
            has(extData, 'id') && map.remove(overlay);
        })
    }

    setLocations = () => {
        const {store} = this.props;
        const {findNearlyPosition} = store;
        const {nearlyLocation, dis, locationcheckscope} = findNearlyPosition();
        this.clearMarker();
        if(nearlyLocation != null){
            let marker, circle;
            marker = new window.AMap.Marker({
                icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                position: [nearlyLocation.longitude, nearlyLocation.latitude],
                extData: {
                    id: nearlyLocation.id
                }
            });
            map.add(marker);

            circle = new window.AMap.Circle({
                center: new window.AMap.LngLat(nearlyLocation.longitude, nearlyLocation.latitude), // 圆心位置
                radius: locationcheckscope,  //半径
                strokeColor: "#F33",  //线颜色
                strokeOpacity: 1,  //线透明度
                strokeWeight: 3,  //线粗细度
                fillColor: "#ee2200",  //填充颜色
                fillOpacity: 0.35, //填充透明度,
                extData: {
                    id: nearlyLocation.id
                }
            });
            map.add(circle);
            this.setState({dis});
        }
    }

    render(){ 
        const {store} = this.props; 
        const {positionData, locationInfo, markers, getCurrentPosition, setEntry} = store;

        let msg = getLabel('500504','距最近的 {param1} {param2}千米');
        msg = msg.replace('{param1}', `<span>${getLabel('504548','考勤范围')}</span>`);
        msg = msg.replace('{param2}', `${this.state.dis || getLabel('463','未知')}`);
        return (
            <div className='mapContent'>
                <div className='map'>
                    <Normal
                        position={positionData.position}
                        address={positionData.address}
                        plugins={this.plugins}
                        events={this.mapEvents}
                        showIntroduction={false}
                    >
                        <div className='location' onClick={() => getCurrentPosition(this.setLocations)}>
                            <div className='icon'>
                                <Icon type='positioning' className='tetete' />
                            </div>
                            <span>{getLabel(500506, '重新定位')}</span>
                        </div>
                        {
                            positionData.position != null ? 
                            <Marker position={positionData.position}/>
                            :
                            <div style={{display: 'none'}}></div>
                        }
                    </Normal>
                </div>
                <div className='infoBar'>
                    <div className='info'>
                        <div dangerouslySetInnerHTML={{ __html: msg }}></div>
                    </div>
                    <div className='remark'></div>
                    <div className='signBtn' onClick={() => setEntry('default')}>{getLabel('82634','外勤签到')}</div>
                </div>
            </div>
            
        )
    }
}